<template>
  <vxe-grid ref="xGrid" v-bind="gridOptions" />
  <vxe-table>
    <vxe-column type="seq" width="60"></vxe-column>
    <vxe-column field="name" title="名称" :title-prefix="{message: '自定义前缀'}"></vxe-column>
    <vxe-column field="role" title="角色" :title-prefix="{message: '自定义前缀图标', icon: 'vxe-icon-question-circle-fill'}"></vxe-column>
    <vxe-column field="date" title="Date" :title-suffix="{message: '自定义后缀'}"></vxe-column>
    <vxe-column field="rate" title="Rate" :title-suffix="{message: '自定义后缀图标', icon: 'vxe-icon-question-circle-fill'}"></vxe-column>
    <vxe-column field="address" title="Address" width="160"></vxe-column>
    <vxe-column type="html" field="content" title="Content" width="200"></vxe-column>
  </vxe-table>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { VxeGrid, VxeTable } from 'vxe-table';

const gridOptions = reactive({
  id: 'grid-plan-pure',
  columns: [
    { type: "checkbox", width: 40 },
    { type: "seq", title: "序", width: 50 },
    { field: "name", title: "医师", minWidth: 150, sortable: true, titleSuffix: { content: '啊啊啊啊' } },
    { field: "code", width: 100, title: "医院:link" },
    { field: "minPackUnit", title: "image", width: 80 },
    { field: "price", title: "money", width: 80 },
    { field: "isShows", title: "status", width: 80 }
  ],
});

</script>
